<!--  -->
<template>
  <div class="authentication">
    <van-nav-bar
      @click-left="onClickLeft"
      title="实名认证"
      :left-arrow="true"
    />
    <div class="content">
      <van-field
        v-model.trim="data.name"
        label-width="80px"
        name="真 实 姓 名"
        label="真 实 姓 名"
        placeholder="请输入真实姓名"
        @click="show = true"
        clearable
        :readonly="data.is_auth === 'Y'"
      />
      <van-field
        :readonly="data.is_auth === 'Y'"
        v-model.trim="data.idcard"
        label-width="80px"
        clearable
        name="身份证号码"
        label="身份证号码"
        placeholder="请输入身份证号码"
      />
      <p class="tip">
        提醒：请您绑定本人真实姓名与身份证号码，若使用他人姓
        名绑定导致无法提现等问题，本公司概不负责。
      </p>
    </div>
    <van-button
      type="primary"
      class="next"
      @click="handleSubmit"
      :class="data.name != '' && data.idcard != '' ? '' : 'no_touch'"
      v-if="data.is_auth === 'N'"
      >下一步</van-button
    >
    <!-- <van-dialog
      v-model="show"
      title
      :showCancelButton="false"
      :showConfirmButton="false"
    >
      <div class="boxone">
        <img src="@/assets/img/authentication/shenfenzheng.png" />
        <div class="name">请先身份认证</div>
      </div>
      <div class="boxonefooter">
        <van-button type="primary" class="cancel" @click="show = false"
          >以后再说</van-button
        >
        <van-button type="primary" class="determine" @click="show = false"
          >立即认证</van-button
        >
      </div>
    </van-dialog> -->
    <van-dialog
      v-model="rz_success"
      title
      :showCancelButton="false"
      :showConfirmButton="false"
    >
      <div class="boxtwo">
        <img src="@/assets/img/authentication/success.png" />
        <div class="name">恭喜您，认证成功！</div>
      </div>
      <div class="boxtwofooter">
        <van-button type="primary" class="determine" @click="rz_success_handle"
          >确定</van-button
        >
      </div>
    </van-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "custom",
  },
  data() {
    //这里存放数据
    return {
      username: null,
      show: true,
      showtwo: false,
      data: {},
      money_info: "",
      money: "",
      rz_success: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    rz_success_handle() {
      this.rz_success = false;
      this.$router.replace({
        path: this.$router.history.current.query.redirect || "/user",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    start() {
      Fetch("/user/info/info").then((res) => {
        this.data = res.data;
      });
    },
    handleSubmit() {
      if (!this.data.name) {
        this.$notify({
          message: "请输入姓名",
          color: "#FF3232",
          background: "#FFEAEA",
        });
        return;
      }

      if (!this.data.idcard) {
        this.$notify({
          message: "请输入身份证号",
          color: "#FF3232",
          background: "#FFEAEA",
        });
        return;
      }

      Fetch("/user/info/auth", {
        ...this.data,
      }).then(() => {
        this.rz_success = true;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.start();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.authentication {
  width: 100%;
  height: 100%;
  background: #fafafa;
  .content {
    margin-top: 13px;
    .tip {
      padding: 15px;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #b1b1b1;
      line-height: 20px;
    }
  }
  .next {
    width: calc(100% - 30px);
    display: block;
    margin: 0 15px;
    background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px #ffd9d4;
    border: none;
    margin-top: 46px;
  }
  /deep/.van-button--disabled {
    background: #d8d8d8;
    border-radius: 5px;
    box-shadow: none;
  }
  .boxone {
    padding: 19px;
    text-align: center;
    img {
      width: 103px;
      height: 103px;
    }
    .name {
      font-size: 19px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #20253a;
      text-align: center;
      line-height: 26px;
      margin-top: 14px;
    }
  }
  .boxtwo {
    padding: 19px;
    text-align: center;
    img {
      width: 161px;
      height: 137px;
    }
    .name {
      font-size: 19px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #20253a;
      text-align: center;
      line-height: 26px;
    }
  }
  .boxonefooter {
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 47px;
    .cancel {
      width: 45%;
      border: 1px solid #b5b7b9;
      border-radius: 3px;
      background: #ffffff;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #b5b7b9;
    }
    .determine {
      width: 45%;
      background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
      border-radius: 3px;
      box-shadow: 0px 2px 4px 0px #ffd9d4;
      border: none;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      margin-left: 15px;
    }
  }
  .boxtwofooter {
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 39px;
    .determine {
      width: 45%;
      background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
      border-radius: 3px;
      box-shadow: 0px 2px 4px 0px #ffd9d4;
      border: none;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .no_touch {
    pointer-events: none;
    opacity: 0.6;
  }
}
</style>